<template>
  <el-container>
    <el-aside :class="{'narrow-aside': !showText}" width="200px">
      <el-button type="text" @click="toggleMenu" class="toggle-menu">
        <i class="el-icon-arrow-left" v-if="showText"></i>
        <i class="el-icon-arrow-right" v-else></i>
      </el-button>
      <el-menu>
        <el-menu-item index="1">
          <div class="menu-item-content" :class="{'text-align-left': showText, 'text-align-center': !showText}">
            <div class="icon-container">
              <img src="@/assets/icons/酒店.png" width="30px" height="30px">
            </div>
            <router-link to="/" tag="span" :class="{'hide-text': !showText}">&nbsp;酒店</router-link>
          </div>
        </el-menu-item>
        <el-menu-item index="2">
          <div class="menu-item-content" :class="{'text-align-left': showText, 'text-align-center': !showText}">
            <div class="icon-container">
              <img src="@/assets/icons/飞机票.png" width="30px" height="30px">
            </div>
            <router-link to="/" tag="span" :class="{'hide-text': !showText}">&nbsp;酒店</router-link>
          </div>
        </el-menu-item>
        <el-menu-item index="3">
          <div class="menu-item-content" :class="{'text-align-left': showText, 'text-align-center': !showText}">
            <div class="icon-container">
              <img src="@/assets/icons/火车票.png" width="30px" height="30px">
            </div>
            <router-link to="/" tag="span" :class="{'hide-text': !showText}">&nbsp;火车票</router-link>
          </div>
        </el-menu-item>
        <el-menu-item index="4">
          <div class="menu-item-content" :class="{'text-align-left': showText, 'text-align-center': !showText}">
            <div class="icon-container">
              <img src="@/assets/icons/汽车.png" width="30px" height="30px">
            </div>
            <router-link to="/RentalCars" tag="span" :class="{'hide-text': !showText}">&nbsp;租车</router-link>
          </div>
        </el-menu-item>
        <el-menu-item index="5">
          <div class="menu-item-content" :class="{'text-align-left': showText, 'text-align-center': !showText}">
            <div class="icon-container">
              <img src="@/assets/icons/群体.png" width="30px" height="30px">
            </div>
            <router-link to="/" tag="span" :class="{'hide-text': !showText}">&nbsp;出行-攻略</router-link>
          </div>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="header-content">
          <img src="https://th.bing.com/th/id/OIP.NmWGloRrdypWqYeb57UZWgHaC5?w=318&h=137&c=7&r=0&o=5&dpr=1.5&pid=1.7"
               alt="Logo" class="logo">
          <el-input placeholder="Search" class="search-input"></el-input>
          <el-button type="primary" @click="login" v-if="!loggedIn">登录</el-button>
          <el-dropdown v-else>
          <span class="el-dropdown-link">
            <img src="path/to/avatar" class="avatar"><span>{{ username }}</span>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="goToOrders">我的订单</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <!-- Main content goes here -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>


<script>

import Cookies from 'js-cookie'
import cookie from "js-cookie";

export default {
  name: "HomePage",
  data() {
    return {
      showText: true, // Initial state
      loggedIn: false, // Change this based on your actual login status
      username: 'User', // Change this based on your actual user data
    };
  },
  methods: {
    toggleMenu() {
      this.showText = !this.showText;
    },
    login() {
      this.$router.push("/Login");
    },
    logout() {
      // Implement your logout logic here
      // 删除 token
      localStorage.removeItem('token');
      cookie.remove('token');
      // 移除 axios 的默认请求头
      this.$router.push("/");
    },
    goToOrders() {
      this.$router.push("/Order");
    },
  }
  ,
  computed: {},
  created() {
    // 检查是否有token
    let token = Cookies.get('token');
    if (token) {
      this.loggedIn = true;
    }
  }

}
</script>

<style scoped>

.text-align-left {
  justify-content: flex-start;
}

.text-align-center {
  justify-content: center;
}

.menu-item-content {
  display: flex;
  align-items: center;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.narrow-aside .menu-item-content {
  justify-content: center;
}

.narrow-aside {
  width: 100px !important;
}

.hide-text {
  display: none;
}

.el-container {
  height: 100vh;
}

.el-aside {
  height: 100%;
  overflow: auto; /* Hide the scrollbar when it's not needed */
}

.el-menu-item {
  margin-left: 20px;
  float: left;
  text-align: center; /* Center the text in the sidebar */
}

.el-header {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid #ccc;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center; /* This will center the items horizontally */
}

.logo {
  width: 100px;
  height: auto;
  /* Add some margin to the logo for spacing */
  margin: 0 20px;
}

.search-input {
  width: 300px;
  /* Add some margin to the search input for spacing */
  margin: 0 20px;
}

.avatar {
  width: 30px;
  height: 30px;
  /* Add some margin to the avatar for spacing */
  margin: 0 10px;
}

.toggle-menu {
  width: 100%;
  text-align: center;
}

#icon {
  width: 20px;
  height: 20px;
  color: red;
}
</style>